/* ========================================================================
   Component: markdownarea
  ========================================================================== */

// Name:            Markdown area
// Description:     Defines styles for markdownareas
//
// Component:       `uk-markdownarea`
//
// Sub-objects:     `uk-markdownarea-navbar`
//                  `uk-markdownarea-navbar-nav`
//                  `uk-markdownarea-navbar-flip`
//                  `uk-markdown-button-markdown
//                  `uk-markdown-button-preview`
//                  `uk-markdownarea-content`
//                  `uk-markdownarea-code`
//                  `uk-markdownarea-preview`
//
// Modifier:        `uk-markdownarea-fullscreen`
//                  `[data-mode='tab']`
//                  `[data-mode='split']`
//
// States:          `uk-active`
//
// ========================================================================

// Variables
// ========================================================================

$markdownarea-navbar-background: #eee;

$markdownarea-navbar-nav-height: 40px;
$markdownarea-navbar-nav-padding-horizontal: 15px;
$markdownarea-navbar-nav-line-height: $markdownarea-navbar-nav-height;
$markdownarea-navbar-nav-color: #444;

$markdownarea-navbar-nav-hover-background: #f5f5f5;
$markdownarea-navbar-nav-hover-color: #444;
$markdownarea-navbar-nav-onclick-background: #ddd;
$markdownarea-navbar-nav-onclick-color: #444;
$markdownarea-navbar-nav-active-background: #f5f5f5;
$markdownarea-navbar-nav-active-color: #444;

$markdownarea-content-border: #ddd;
$markdownarea-content-background: #fff;
$markdownarea-content-padding: 20px;
$markdownarea-content-split-border: #eee;

$markdownarea-fullscreen-z-index: 990;
$markdownarea-fullscreen-content-top: $markdownarea-navbar-nav-height;
$markdownarea-fullscreen-icon-resize: "\f066";

.uk-markdownarea {
}

// Sub-object `uk-markdownarea-navbar`

.uk-markdownarea-navbar {
  background: $markdownarea-navbar-background;
}

// Micro clearfix

.uk-markdownarea-navbar:before,
.uk-markdownarea-navbar:after {
  content: " ";
  display: table;
}

.uk-markdownarea-navbar:after {
  clear: both;
}

// Sub-object `uk-markdownarea-navbar-nav`

.uk-markdownarea-navbar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

.uk-markdownarea-navbar-nav > li {
  float: left;
}

// 1. Dimensions
// 2. Style

.uk-markdownarea-navbar-nav > li > a {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  /* 1 */
  height: $markdownarea-navbar-nav-height;
  padding: 0 $markdownarea-navbar-nav-padding-horizontal;
  line-height: $markdownarea-navbar-nav-line-height;
  /* 2 */
  color: $markdownarea-navbar-nav-color;
  font-size: 11px;
  cursor: pointer;
}

//
// Hover
// 1. Apply hover style also to focus state
// 2. Remove default focus style

.uk-markdownarea-navbar-nav > li:hover > a,
.uk-markdownarea-navbar-nav > li > a:focus {
  // 1
  background-color: $markdownarea-navbar-nav-hover-background;
  color: $markdownarea-navbar-nav-hover-color;
  outline: none; /* 2 */
}

// OnClick 
.uk-markdownarea-navbar-nav > li > a:active {
  background-color: $markdownarea-navbar-nav-onclick-background;
  color: $markdownarea-navbar-nav-onclick-color;
}

// Active 
.uk-markdownarea-navbar-nav > li.uk-active > a {
  background-color: $markdownarea-navbar-nav-active-background;
  color: $markdownarea-navbar-nav-active-color;
}

// Sub-object: `uk-markdownarea-navbar-flip`

.uk-markdownarea-navbar-flip {
  float: right;
}

// Sub-object for special buttons

[data-mode='split'] .uk-markdown-button-markdown,
[data-mode='split'] .uk-markdown-button-preview {
  display: none;
}

// Sub-object `uk-markdownarea-content`

.uk-markdownarea-content {
  border-left: 1px solid $markdownarea-content-border;
  border-right: 1px solid $markdownarea-content-border;
  border-bottom: 1px solid $markdownarea-content-border;
  background: $markdownarea-content-background;
}

// Micro clearfix

.uk-markdownarea-content:before,
.uk-markdownarea-content:after {
  content: " ";
  display: table;
}

.uk-markdownarea-content:after {
  clear: both;
}

// Modifier `uk-markdownarea-fullscreen`

.uk-markdownarea-fullscreen {
  position: fixed;
  top: $navbar-hg;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $markdownarea-fullscreen-z-index;
}

.uk-markdownarea-fullscreen .uk-markdownarea-content {
  position: absolute;
  top: $markdownarea-fullscreen-content-top;
  left: 0;
  right: 0;
  bottom: 0;
}

.uk-markdownarea-fullscreen .uk-icon-expand:before {
  content: $markdownarea-fullscreen-icon-resize;
}

// Sub-objects `uk-markdownarea-code` and `uk-markdownarea-preview`

.uk-markdownarea-code,
.uk-markdownarea-preview {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.uk-markdownarea-preview {
  padding: $markdownarea-content-padding;
  overflow-y: scroll;
  h1, h2, h3, h4 {
    &:first-child {
      margin-top: 0;
    }
  }
}

// Tab view

[data-mode='tab'][data-active-tab='code'] .uk-markdownarea-preview,
[data-mode='tab'][data-active-tab='preview'] .uk-markdownarea-code {
  display: none;
}

// Split view

[data-mode='split'] .uk-markdownarea-code,
[data-mode='split'] .uk-markdownarea-preview {
  float: left;
  width: 50%;
}

[data-mode='split'] .uk-markdownarea-code {
  border-right: 1px solid $markdownarea-content-split-border;
}

//  CodeMirror modifications

.uk-markdownarea .CodeMirror {
  padding: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Fullscreen MArkdown area editor */
.markdownarea-fullscreen {
  body {
    height: 100%;
    @include transition("height 0s linear 0.2s");
  }
  .navbar-top,
  .sidebar,
  .offsidebar {
    visibility: hidden;
    opacity: 0;
    @include transition("opacity .2s ease, visibility 0s ease 0.2s");
  }
  .wrapper > section {
    margin-left: 0;
    //.transition-delay(0.2s)
  }
}
